{% extends "base.html" %}
{% block title %}平台概述{% endblock %}
{% block index %}layui-nav-itemed{% endblock %}
{% block css %}
    <style>
        .icon {
            width: 4em;
            height: 4em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }

        {# 为表格设置行高 #}
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>
{% endblock %}
{% block body %}
    <div class="layui-row layui-bg-gray" style="padding: 1%;">
        <div class="layui-col-xs8">
            <div class="layui-card" style="min-height: 320px;">
                <div class="layui-card-header">集群信息</div>
                <div class="layui-card-body">
                    <div class="layui-col-xs4" id="node_info" style="height: 280px;width: 25%;"></div>
                    <div class="layui-col-xs4" id="node_schedulable" style="height: 280px;width: 25%;"></div>
                    <div class="layui-col-xs4" id="node_cpu" style=" height: 280px;width: 25%;"></div>
                    <div class="layui-col-xs4" id="node_memory" style="height: 280px;width: 25%;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs4">
            <div class="layui-card" style="margin-left: 1%;min-height: 320px;">
                <div class="layui-card-header">Workloads</div>
                <div class="layui-card-body">

                    <div class="layui-row layui-col-md12 index-workload">
                        <div class="layui-col-md1" style="margin-top: 1.5%">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-self-operated-business"></use>
                            </svg>
                        </div>
                        <div class="layui-col-md11">
                            <p style="margin-left: 5%; margin-top: 2.5%">{{ workload.namespace_count }}</p>
                            <p style="margin-left: 5%;"><strong>Namespace</strong></p>
                        </div>
                    </div>

                    <div class="layui-row layui-col-space20">
                        <div class="layui-col-md6">
                            <div class="index-workload">
                                <div class="layui-col-md3" style="margin-top: 1.5%">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-layers-fill"></use>
                                    </svg>
                                </div>
                                <div class="layui-col-md3" style="margin-top: 1.5%">
                                    <p style="margin-left: 5%; margin-top: 2.5%">{{ workload.deployment_count }}</p>
                                    <p style="margin-left: 5%;">
                                        <strong>Deployment</strong>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="index-workload">
                                <div class="layui-col-md3" style="margin-top: 1.5%">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-layers-fill"></use>
                                    </svg>
                                </div>
                                <div class="layui-col-md3" style="margin-top: 1.5%">
                                    <p style="margin-left: 5%; margin-top: 2.5%">{{ workload.daemonset_count }}</p>
                                    <p style="margin-left: 5%;">
                                        <strong>Daemonset</strong>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row layui-col-xs12 index-workload">
                        <div class="layui-col-md1" style="margin-top: 1.5%">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-vr-fill"></use>
                            </svg>
                        </div>
                        <div class="layui-col-md11">
                            <p style="margin-left: 5%; margin-top: 2%">{{ workload.pod_count }}</p>
                            <p style="margin-left: 5%;">
                                <strong>Pod</strong>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12">
            <div class="layui-card" style=" min-height: 500px;">
                <div class="layui-card-header">k8s资源</div>
                <div class="layui-card-body">
                    <div class="layui-tabloe" id="node_resource"></div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="/static/echarts/echarts.min.js"></script>
    <script src="/static/js/iconfont.js"></script>
    <script src="/static/js/chart.js"></script>
    <script>
        layui.use(['jquery', 'table'], function () {
            const $ = layui.jquery;
            const table = layui.table;
            const node_info = JSON.parse('{{ node |safe}}')
            const node_all = {{ node_all|safe }}

            option.title.text = '健康节点' + node_info.status['Ready']
            option.series[0].data[0].value = node_info.status['NotReady']
            option.series[0].data[1].value = node_info.status['Ready']
            option && nodeChart.setOption(option);

            optionSchedulable.title.text = '可调度节点' + node_info.schedulable['是'] + '/' + (node_info.schedulable['是'] + node_info.schedulable['否'])
            optionSchedulable.series[0].data[0].value = node_info.schedulable['否']
            optionSchedulable.series[0].data[1].value = node_info.schedulable['是']
            optionSchedulable && nodeChartSchedulable.setOption(optionSchedulable);

            optionNodeCPU.title.text = '可分配的CPU' + (node_info.capacity_cpu - node_info.pod_requests_cpu) + '核'
            optionNodeCPU.series[0].data[0].value = node_info.pod_requests_cpu
            optionNodeCPU.series[0].data[1].value = node_info.capacity_cpu - node_info.pod_requests_cpu
            optionNodeCPU && nodeChartCPU.setOption(optionNodeCPU);

            optionNodeMemory.title.text = '可分配的内存' + (node_info.capacity_memory - node_info.pod_requests_memory) + 'G'
            optionNodeMemory.series[0].data[0].value = node_info.pod_requests_memory
            optionNodeMemory.series[0].data[1].value = (node_info.capacity_memory - node_info.pod_requests_memory)
            optionNodeMemory && nodeChartMemory.setOption(optionNodeMemory);

            // k8s 资源表格
            table.render({
                elem: '#node_resource'
                , cols: [[
                    {field: 'name', height: 50, title: '主机', templet: nameTemplet}
                    , {field: 'status', title: '状态'}
                    , {field: 'cpu_percentage', title: 'CPU',  templet: cpuTemplet}
                    , {field: 'memory_percentage', title: '内存',  templet: memoryTemplet}
                    , {field: 'pods', title: 'pods', minWidth: 150, templet: podTemplet}
                ]],
                data: node_all
            });

            function nameTemplet(data) {
                let result = '<strong>' + data.name + '</strong>' + '<br>' + data.ip
                return result
            }

            function cpuTemplet(data) {
                let result = '<div class="layui-row" ><div class="layui-col-md4" id="' + data.name + '-cpu" style="width: 30%;height: 50px;"></div>' + '<div class="layui-col-md8"><strong>' + data.cpu_percentage + '</strong>' + '<br>' + data.node_requests_cpu + '/' + data.node_cpu + "</div></div>"
                return result
            }

            function memoryTemplet(data) {
                let result = '<div class="layui-row" ><div class="layui-col-md4" id="' + data.name + '-memory" style="width: 30%;height: 50px;"></div>' + '<div class="layui-col-md8"><strong>' + data.memory_percentage + '</strong>' + '<br>' + data.node_requests_memory + '/' + data.node_memory + "</div></div>"
                return result
            }

            function podTemplet(data) {
                let result = '<div class="layui-row" ><div class="layui-col-md4" id="' + data.name + '-pod" style="width: 30%;height: 50px;"></div>' + '<div class="layui-col-md8"><strong>' + data.pod_percentage + '</strong>' + '<br>' + data.node_pod_num + '/' + data.pod + "</div></div>"
                return result
            }

            for( node in node_all){
                ChartTable(node_all[node].name + '-cpu', node_all[node].node_cpu, node_all[node].node_requests_cpu);
                ChartTable(node_all[node].name + '-memory', node_all[node].node_memory, node_all[node].node_requests_memory);
                ChartTable(node_all[node].name + '-pod', node_all[node].pod, node_all[node].node_pod_num);
            };
            // echart 图形会根据浏览器重新
            window.addEventListener("resize", function () {
                nodeChart.resize();
                nodeChartSchedulable.resize();
                nodeChartCPU.resize();
                nodeChartMemory.resize();
            });
        })
    </script>
{% endblock %}